<template>
  <div class="kLine_wrap">
    <headTop :headClass="'white_header'">
      <span slot="left"></span>
        KLine graph
      <span slot="right" class="right" @click="$router.push({path: 'countryChoose'})">
        <span class="lang" v-html="lang"></span>
        <span class="iconfont icon-fanhui"></span>
      </span>
    </headTop>
    <!-- information -->
    <div class="info_wrap">
      <!-- Left information -->
      <div class="info_left">
        <p class="left_title">Open price ({{uint[ind]}})</p>
        <span class="left_on">{{markets.kai}}</span>
        <p class="left_title">Closing price ({{uint[ind]}})</p>
        <span class="left_off">{{markets.shou}}</span>
      </div>
      <!-- Information on the right -->
      <div class="info_right">
        <div class="max_wrap right_wrap">
          <span class="right_title">Highest:</span>
          <span class="max right_content">{{uint[ind]}}{{markets.up_pro}}</span>
          <span class="right_title">Minimum:</span>
          <span class="min right_content">{{uint[ind]}}{{markets.on_pro}}</span>
        </div>
        <div class="recently_wrap right_wrap">
          <span class="right_title">Total sales:</span>
          <span class="recently right_content">{{markets.on_num}}</span>
        </div>
        <div class="history_wrap right_wrap">
          <span class="right_title">Total historical purchases:</span>
          <span class="history right_content">{{markets.up_num}}</span>
        </div>
      </div>
    </div>
    <div class="markets_line" ref="trendMap"></div>
    <foot></foot>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'kLine',
  data () {
    return {
      lang: 'China[CNY]',
      ind: 0,
      uint: [
        '￥',
        '$',
        'HK$',
        'J￥',
        '￡',
        '€',
        'C$',
        'CHF',
        'A$'
      ],
      markets: {},
      options: {
        // Chart name
        title: {
          text: 'nihao'
        },
        // Total data
        rawData: [],
        // Chart setting
        trendMapConfig: {
          // background color
          backgroundColor: '#282828',
          // Legend
          legend: {
            // Data name
            data: ['First', 'The second'],
            // Idle colors, I don't know what to do.
            inactiveColor: '#777',
            // Font style
            textStyle: {
              color: '#fff'
            }
          },
          // Pop up box display
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: true,
              type: 'cross',
              lineStyle: {
                color: '#376df4',
                width: 2,
                opacity: 1
              }
            }
          },
          // xAxis display
          xAxis: {
            type: 'category',
            // this.options.rawData.map(item => item[0])
            data: [],
            axisLine: {
              lineStyle: {
                color: '#f2d68f'
              }
            },
            axisPointer: {
              label: {
                color: '#fff',
                backgroundColor: '#363b49',
                shadowBlur: 0
              }
            }
          },
          // yAxis display
          yAxis: {
            scale: true,
            axisLine: {
              lineStyle: {
                color: '#f2d68f'
              }
            },
            splitLine: {
              show: false
            },
            axisPointer: {
              label: {
                color: '#fff',
                backgroundColor: '#363b49',
                shadowBlur: 0
              }
            }
          },
          grid: {
            bottom: 80,
            top: 20,
            left: 80,
            right: 60
          },
          dataZoom: [{
            textStyle: {
              color: '#f2d68f'
            },
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            dataBackground: {
              areaStyle: {
                color: '#8392A5'
              },
              lineStyle: {
                opacity: 0.8,
                color: '#8392A5'
              }
            },
            handleStyle: {
              color: '#f2d68f',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }, {
            type: 'inside'
          }],
          animation: true,
          series: [
            {
              type: 'candlestick',
              name: 'dayK',
              data: [],
              itemStyle: {
                normal: {
                  color: '#FD1050',
                  color0: '#0CF49B',
                  borderColor: '#FD1050',
                  borderColor0: '#0CF49B'
                }
              }
            },
            {
              name: 'MA5',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              }
            },
            {
              name: 'MA10',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              }
            },
            {
              name: 'MA20',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              }
            },
            {
              name: 'MA30',
              type: 'line',
              data: [],
              smooth: true,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              }
            }
          ]
        }
      }
    };
  },
  beforeMount () {
    let area = localStorage.getItem('area');
    let ind = localStorage.getItem('ind');
    if (area) {
      area = JSON.parse(area);
      this.lang = area.area;
      this.ind = ind;
    }
  },
  methods: {
    // get data
    init () {
      // Get timeline
      this.options.trendMapConfig.xAxis.data = this.getDates();
      this.$set(this.options.trendMapConfig.series[0], 'data', this.getDatas()); // Getting useful information
      // ObtainMA
      this.$set(this.options.trendMapConfig.series[1], 'data', this.calculateMa(5, this.options.rawData));
      this.$set(this.options.trendMapConfig.series[2], 'data', this.calculateMa(10, this.options.rawData));
      this.$set(this.options.trendMapConfig.series[3], 'data', this.calculateMa(20, this.options.rawData));
      this.$set(this.options.trendMapConfig.series[4], 'data', this.calculateMa(30, this.options.rawData));
      this.initEcharts();
    },
    // Build icons
    initEcharts () {
      const map = echarts.init(this.$refs.trendMap);
      map.setOption(this.options.trendMapConfig);
    },
    // pick up information
    calculateMa (dayCount, data) {
      let result = [];
      for (let i = 0, len = data.length; i < len; i++) {
        if (i < dayCount) {
          result.push('-');
          continue;
        }
        let sum = 0;
        for (let j = 0; j < dayCount; j++) {
          sum += Number(data[i - j].up_disc);
        }
        result.push((sum / dayCount).toFixed(2));
      }
      return result;
    },
    // Get time
    getDates () {
      let dates = this.options.rawData.map(item => {
        return item.times;
      });
      return dates;
    },
    // Getting useful information
    getDatas () {
      let news = this.options.rawData.map(item => {
        return [+item.up_disc, +item.on_disc, +item.on_pur, +item.up_pur];
      });
      return news;
    },
    // Access to information interface
    getInfo () {
      this.axios.get('index/present/presenthall/k_line_graph', {
        params: {
          guo: this.ind
        }
      }).then(({data}) => {
        if (data.status === 200) {
          this.markets = data.ins;
          this.options.rawData = data.data;
          this.init();
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  mounted () {
    this.getInfo();
  }
};
</script>

<style lang="scss" scpoed>
  .kLine_wrap {
    padding-top: 110px;
    background: #f4f5f7;
    height:100%;
    padding-bottom:98px;
    .header_wrap {
      .right {
        .lang {
          color: #666666;
          font-size: 26px;
          vertical-align: middle;
        }
        .icon-fanhui {
          display: inline-block;
          transform: rotate(180deg);
          font-size: 26px;
          color: #b2aebf;
          vertical-align: middle;
        }
      }
    }
    // information
    .info_wrap {
      min-height: 270px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // Left information
      .info_left {
        padding-left: 32px;
        .left_title {
          font-size: 26px;
          color: #666666;
          line-height: 44px;
        }
        .left_on {
          display: block;
          font-size: 40px;
          color: #fe811d;
          font-weight: 500;
          margin-bottom: 15px;
        }
        .left_off {
          font-size: 40px;
          color: #5768ec;
          font-weight: 500;
        }
      }
      // Information on the right
      .info_right {
         width: 52%;
        .right_wrap {
          width: 100%;
          min-height: 78px;
          line-height: 78px;
          border-bottom: 1Px solid #e5e5e5;
          &.history_wrap {
            border-bottom: none;
          }
        }
        .right_title {
          font-size: 26px;
          color: #999999;
        }
        .right_content {
          font-size: 26px;
          color: #222222;
          &.max {
            padding-right: 10px;
          }
        }
      }
    }
    // kLine graph
    .markets_line{
      background: #21202d;
      // height: 818px;
      min-height: calc(100%-270px);
    }
  }
</style>
